<template>
  <el-dialog class="public-dialog" title="批量修改订单优先级别" width="560" :modelValue="modelValue" @close="handleClose" draggable align-center :close-on-click-modal="false">
    <p class="text-[14px] text-[#0a1431] leading-[20px] mb-[16px]">
      <span>选中数据：</span>
      <span class="text-[18px] text-[#3366F1]">{{ rows.length }}</span>
    </p>
    <div>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" label-position="top">
        <el-form-item label="订单优先级" prop="priority">
          <VXSelect dictionary="order_strategy_order_priority" class="w-[100%]" placeholder="请选择" clearable v-model="form.priority" />
        </el-form-item>
      </el-form>

      <div class="flex items-center text-[12px] text-[#9DA1AD] leading-[17px]">
        <svg-icon icon-class="warning" class="mr-[4px]"></svg-icon>
        数字越大，优先级别越高，仓库配货时，优先分配库存
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button :disabled="loading" @click="handleClose">取消</el-button>
        <el-button type="primary" :loading="loading" @click="handleSave"> 保存 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  rows: { type: Array, default: () => [] },
})

const emit = defineEmits(["update:modelValue", "refresh", "submit"])
const formRef = ref()
const form = ref({})
const priority = ref("")
const loading = ref(false)
const fieldList = ref([
  {
    field: "reason",
    type: "select",
    label: "取消原因",
    style: { width: "100%" },
  },
])

const rules = reactive({
  priority: [{ required: true, message: "请选择", trigger: "change" }],
})

const handleSave = async () => {
  try {
    loading.value = true
    formRef.value.validate((valid) => {
      if (valid) {
        emit("submit", { input: form.value.priority })
      } else {
        return false
      }
    })
  } catch (e) {
    console.error(e)
  } finally {
    loading.value = false
  }
}

const handleClose = (refresh) => {
  emit("update:modelValue", false)
  formRef.value.resetFields()
}
</script>
